<template>
  <div class="preview">
    <VueSlickCarousel v-bind="settings">
      <div @click="toDetails(item)" class="project-item" v-for="(item,index) in projectData" :key="item.title">
        <img v-if="index%2==0" :src="item.image" alt="" srcset="">
          <div v-if="index%2==0" class="title">{{item.title}}</div>

          <div v-if="index%2==1" class="title" style="margin-bottom: 5px;">{{item.title}}</div>
          <img v-if="index%2==1" :src="item.image" alt="" srcset="">
      </div>
    </VueSlickCarousel>
  </div>
</template>
<script>
import VueSlickCarousel from 'vue-slick-carousel';
import 'vue-slick-carousel/dist/vue-slick-carousel.css';
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css';
import { getProjects } from '@/api/server.js';
export default {
  name: 'projectPreview',
  components: {
    VueSlickCarousel,
  },
  mounted(){
    
    getProjects().then(res => {
      console.log(111,res);
      if(res.data && res.data.length > 0) {
        res.data.map(item => {
          item.image = item.image || require('@/assets/images/login_bg.jpg')
        })
        this.projectData = res.data;
      }
    });
    
  },
  data(){
    return {
      projectData: [
        {
          url: require('@/assets/images/login_bg.jpg'),
          title: '产品1'
        },
        {
          url: require('@/assets/images/login.jpg'),
          title: '微电子报账系统2'
        },
        {
          url: require('@/assets/images/login_bg.jpg'),
          title: '产品3'
        },
        {
          url: require('@/assets/images/login.jpg'),
          title: '微电子报账系统4'
        },
        {
          url: require('@/assets/images/login_bg.jpg'),
          title: '产品5'
        },
        {
          url: require('@/assets/images/login.jpg'),
          title: '微电子报账系统6'
        },
        
      ],
      settings:{
        "dots": true,
        "infinite": true,
        "initialSlide": 0,
        "speed": 500,
        "slidesToShow": 4,
        "slidesToScroll": 1,
        "swipeToSlide": true
      }
    }
  },
  methods:{
    toDetails(item) {
      console.log(1,item);
      let routeData = this.$router.resolve({
        name: "BlogDetails",
        query: {type:'project',id: item.id,title: item.title}
      });
      window.open(routeData.href, '_blank')
    },
  },

}
</script>
<style lang="less" scoped>
 @import url("../../assets/css/global.less");
.preview {
  height: 100%;
  /deep/ .slick-slider {
    padding-top: 20vh;
    // white-space: nowrap;
    height: 98%;
    .slick-arrow {
      &::before {
        color: @color-text;
        font-size: 25px;
      }
      
    }
    .slick-slide  {
      width: 22.5vw !important;
      padding-left: 2rem;
      padding-right: 2rem;
      .project-item {
        cursor: pointer;
        img {
          width: 100%;
          height: 30vh;
        }
        .title {
          text-align: right;
          padding-right: 1rem;
          margin: .5rem 0;
          border-right: 2px solid @color-title;
        }
      }
      
    }
    .slick-dots {
      bottom: 0;
    }
  }
}
</style>
